<!--
 * @Author: Bennty
 * @Date: 2024-12-25 15:09:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-27 10:27:34
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="销售审核" @close="handleClose">
        <div class="company-info">
            <div class="company-name">
                <h1>临沂三江纸制品有限公司</h1>
                <div class="company-address">
                    <span>地址：临沂市兰山区临西十二路大山路北200米路东</span>
                    <span>电话/手机：15275587977</span>
                </div>
            </div>
            <div class="saler-order">
                <h1>【销售单】</h1>
            </div>
        </div>
        <el-form class="customer-info-form">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户名称：">芙莉法甜</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系电话：">芙莉法甜</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人："></el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户地址：">芙莉法甜</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发货方式：">芙莉法甜</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发货日期："></el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div id="print-area" ref="printArea">
            <table class="order-table">
                <tr>
                    <td>序号</td>
                    <td colspan="2">品名及规格</td>
                    <td>单位</td>
                    <td>数量(箱)</td>
                    <td>单价(元/箱)</td>
                    <td>金额</td>
                    <td colspan="2">备注</td>
                </tr>
                <tr v-for="(item,index) in productList" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td colspan="2">{{ item.name }}</td>
                    <td >{{ item.unite }}</td>
                    <td >{{ item.number }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ Number(item.price)*Number(item.number) }}</td>
                    <td colspan="2">{{ item.remark }}</td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: left;">
                        合计金额(人民币大写):
                    </td>
                    <td colspan="4" style="text-align: left;">
                        (小写): 
                    </td>
                </tr>
                <tr>
                    <td colspan="7" style="text-align: left;">
                        备注：
                    </td>
                    <td colspan="3" style="text-align: left;">
                        付款方式：
                    </td>
                </tr>
                <tr>
                    <td colspan="10" style="text-align: left;">
                        <div>1.货到由客户当场验收；收货后对产品质量有异议，请在收货后七日内提出，超过七日视同合格</div>
                        <div>1.货到由客户当场验收；收货后对产品质量有异议，请在收货后七日内提出，超过七日视同合格</div>
                    </td>
                </tr>
            </table>
            <el-row style="margin-top: 10px">
                <el-col :span="4">制单：</el-col>
                <el-col :span="4">复核人：</el-col>
                <el-col :span="4">审核人：</el-col>
                <el-col :span="4">送货人：</el-col>
                <el-col :span="4">客户签收：</el-col>
            </el-row>
            <div class="tips">
                <span>1</span>
                <span class="tip-text">白存根</span>
                <span>2</span>
                <span class="tip-text">红客户</span>
                <span>3</span>
                <span class="tip-text">黄仓库</span>
            </div>
        </div>
        <div class="paied-method-container">
            <div class="paied-method">
                <h2 v-if="paiedInfo.length" style="text-align: center; font-weight: bolder;">收款详情</h2>
                <el-table v-if="paiedInfo.length" :data="paiedInfo">
                    <el-table-column label="收款日期" prop="date" align="center"></el-table-column>
                    <el-table-column label="收款方式" prop="mehtod" align="center"></el-table-column>
                    <el-table-column label="收款金额" prop="amount" align="center"></el-table-column>
                    <el-table-column label="付款人" prop="paier" align="center"></el-table-column>
                    <el-table-column label="店铺名称" prop="shopName" align="center"></el-table-column>
                    <el-table-column label="付款单号" prop="paymentAccount" align="center"></el-table-column>
                </el-table>
                <el-form ref="formRef" :model="formData" class="payment-form">
                    <el-form-item label="付款方式" prop="paymentMethod">
                        <el-select v-model="formData.paymentMethod" placeholder="请选择" @change="handleMehodChange">
                            <el-option v-for="item in payTypeOptions" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 线上/线下付款 -->
                    <el-row v-if="formData.paymentMethod != '3' && formData.paymentMethod != '4' && formData.paymentMethod != '5' && formData.paymentMethod != '6'">
                        <el-col :span="12">
                            <el-form-item label="付款账号" prop="paymentAccount">
                                <el-select v-model="formData.paymentAccount" placeholder="请选择">
                                    <el-option v-for="item in formData.payMethod == '1'? props.onlineMethod:props.offlineMehtod" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="付款日期" prop="paymentDate">
                                <el-date-picker type="date" v-model="formData.paymentDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 线上/线下付款 -->
                    <el-row v-if="formData.paymentMethod != '3' && formData.paymentMethod != '4' && formData.paymentMethod != '5' && formData.paymentMethod != '6'">
                        <el-col :span="12">
                            <el-form-item label="付款金额" prop="money">
                                <el-input type="number" v-model="formData.money" placeholder="输入本次付款金额" style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="formData.paymentMethod == '1'?'付款账号':'付款人'" prop="shopName">
                                <el-input v-model="formData.shopName" placeholder="请输入" style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 合同抵扣，预付款抵扣 -->
                    <el-row v-if="formData.paymentMethod == '3' || formData.paymentMethod == '4'">
                        <el-col :span="12">
                            <el-form-item label="付款日期" prop="paymentDate">
                                <el-input disabled v-model="formData.paymentDate" style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抵扣金额" prop="money">
                                <el-input type="number" v-model="formData.money" placeholder="请输入本次抵扣金额" style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 抹零专用 -->
                    <el-row v-if="formData.paymentMethod == '6'">
                        <el-col :span="12">
                            <el-form-item label="付款日期" prop="paymentDate">
                                <el-date-picker type="date" v-model="formData.paymentDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抹零金额" prop="money">
                                <el-input type="number" v-model="formData.money" placeholder="请输入本次抹零金额" style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="收款备注" prop="remark" v-if="formData.paymentMethod != '5'">
                        <el-input v-model="formData.remark" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary"  >审核通过</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getCustomerByIdApi } from '@/api/sj/customer-crm';

const props = defineProps<{
    visible: boolean,
    orderDetails: any,
    onlineMethod: any[],
    offlineMehtod: any[],
    payType: any[]
}>();
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();

const productList = ref<any[]>([
    {
        id: 1,
        name: '麦贝拉A款产品',
        unite: '个',
        number: 100,
        price: 10,
        remark: 'remark remark'
    },
    {
        id: 2,
        name: '麦贝拉B款产品',
        unite: '只',
        number: 150,
        price: 8,
        remark: 'ddd'
    },
    {
        id: 3,
        name: '麦贝拉C款产品',
        unite: '只',
        number: 200,
        price: 7.5,
        remark: 'ddd'
    },
]);

const paiedInfo = ref<any[]>([
    {
        date: '2024-12-25',
        mehtod: '微信',
        amount: 5000,
        paier: '张三',
        shopName: '店铺1',
        paymentAccount: '123456'
    }
]);

const formData = ref<any>({
    paymentMethod: undefined,
    paymentAccount: undefined,
    paymentDate: undefined,
    money: undefined,
    shopName: undefined,
    remark: undefined
});

const payTypeOptions = ref<any[]>([]);

/** 是否要有月结的选项 */
watch(()=>[props.visible,props.orderDetails], async ([newVisible,newData])=>{
    if(newVisible){
        const { data } = await getCustomerByIdApi(newData.customerId);
        if(data.settlementMethod == '2'){
            payTypeOptions.value = [...props.payType];
        }else{
            const options = [...props.payType];
            let index = 0;
            for(let option of options){
                if(option.label == '月结'){
                    options.splice(index,1);
                };
                index += 1;
            };
            payTypeOptions.value = options;
        };
    };
    
});

const handleMehodChange = (value: any) => {
    formData.value.paymentAccount = undefined;
    formData.value.paymentDate = undefined;
    formData.value.money = undefined;
    formData.value.shopName = undefined;
    formData.value.remark = undefined;
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};
</script>

<style lang="scss" scoped>
.company-info{
    display: flex;
    justify-content: center;
    .company-name{
        margin-right: 25px;
        h1{
            font-size: 32px;
            margin-bottom: 10px;
            font-weight: bolder;
        }
    }
    .company-address{
        span{
            font-size: 14px;
            display: block;
        }
    }
    .saler-order{
        h1{
            font-size: 32px;
            font-weight: bolder;
        }
    }
}
.customer-info-form{
    .el-form-item{
        margin-bottom: 0px;
    }
}

#print-area{
    // display: flex;
    // justify-content: center;
    // flex-flow:wrap;
    position: relative;
    .tips{
        position: absolute;
        right: 40px;
        top: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
            writing-mode: vertical-rl;
            margin-top:5px;
        }
        .tip-text{
            margin-bottom: 10px;
        }
    }
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        padding-top: 12px;
        .product-image{
            width: 70%;
            height: 50px;
        }
        .order-number{
            color: blue
        }
    }
    .not-center{
        text-align: left;
    }
    .code-image{
        height: 100px
    }
    .inventory-alert{
        color: red;
    }
    .field-title{
        font-weight: bold;
    }
    .auxiliary-name{
        display: flex;
        justify-content: space-between;
        span{
            display: block
        }
    }
    .inputing-col{
        display: flex;
        justify-content: center;
        align-items: center;
        .inputing-col{
            display: flex;
            align-items: center;
        }
    }
    .apply-input{
        width: 110px;
        height: 40px;
    }
    .apply-number{
        display: block;
        width: 110px;
        height: 40px;
        cursor: pointer;
    }
}
.paied-method-container{
    display: flex;
    justify-content: center;
    flex-flow:wrap;
    margin-top: 15px;
}
.paied-method{
    border-top: solid 1px gray;
    padding-top: 15px;
    width: 90%;
    display: flex;
    justify-content: center;
    flex-flow:wrap;
    .payment-form{
        margin-top: 20px;
        width: 70%;
    }
}
</style>